<fieldset>
    <legend>条件搜索</legend>
    <form class="layui-form layui-form-pane form-search" action="{:request()->url()}" onsubmit="return false" method="get" autocomplete="off">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">模糊搜索</label>
            <div class="layui-input-inline">
                <input name="text" value="{:input('get.text')}" placeholder="请输入名称或编码" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">省</label>
            <div class="layui-input-inline">
                <select name="province" lay-filter="province">
                    <option value="">请选择</option>
                    {volist name="province" id="v"}
                    <option value="{$key}" {if $key== input('get.province')} selected {/if}>{$v}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">市</label>
            <div class="layui-input-inline">
                <select name="city" lay-filter="city">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">区</label>
            <div class="layui-input-inline">
                <select name="district" lay-filter="district">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">类别</label>
            <div class="layui-input-inline">
                <select class="layui-select" name="type">
                    <option value=''>-- 全部类别--</option>
                    <option value=1 {if input('get.type') == 1}selected{/if}>自营</option>
                    <option value=2 {if input('get.type') == 2}selected{/if}>联营</option>
                    <option value=3 {if input('get.type') == 3}selected{/if}>加盟</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select class="layui-select" name="status">
                    <option value=''>-- 全部状态 --</option>
                    <option value=1 {if input('get.status') == 1}selected{/if}>正常</option>
                    <option value=2 {if input('get.status') == 2}selected{/if}>关闭</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-inline">
                <input data-date-range name="create_at" value="{:input('get.create_at')}" placeholder="请选择创建时间" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>
        </div>
    </form>
    <script>
        form.render()

        form.on('select(province)', function (data) {
            let pid = data.value;
            cityArray(pid, 'city')
            $('select[name="district"]').html('<option value="">请选择</option>')
        })
        form.on('select(city)', function (data) {
            let pid = data.value;
            cityArray(pid, 'district')
        })

        function cityArray(pid, city) {
            $.ajax({
                url: "{:url('distributor/cityArray')}",
                data: {'pid': pid},
                success: function (result) {
                    let data = result.data;
                    let selelt = $('select[name="' + city + '"]');
                    selelt.html('<option value="">请选择</option>')
                    $.each(data, function (index, value) {
                        // console.log(value.department_id);
                        selelt.append(new Option(value, index));// 下拉菜单里添加元素
                    });
                    form.render("select");//重新渲染 固定写法
                }
            });
        }

        city();
        function city() {
            let pid = <?php  $city = input('get.province')?input('get.province'):0; echo $city; ?>;
            let id = <?php  $city = input('get.city')?input('get.city'):0; echo $city; ?>;
            let city = 'city';
            if(pid){
                cityString(pid, id, city)
            }
        }
        district();

        function district() {
            let pid = <?php  $city = input('get.city')?input('get.city'):0; echo $city; ?>;
            let id = <?php  $city = input('get.district')?input('get.district'):0; echo $city; ?>;
            let city = 'district';
            if(pid){
                cityString(pid, id, city)
            }
        }

        function cityString(pid, id, city) {
            $.ajax({
                url: "{:url('distributor/cityArray')}",
                data: {'pid': pid},
                success: function (result) {
                    let data = result.data;
                    let selelt = $('select[name="' + city + '"]');
                    selelt.html('<option value="">请选择</option>')
                    $.each(data, function (index, value) {
                        // console.log(value.department_id);
                        if (id == index) {
                            selelt.append('<option value="' + index + '" selected>' + value + '</option>')
                        } else {
                            selelt.append(new Option(value, index));// 下拉菜单里添加元素
                        }
                    });
                    form.render("select");//重新渲染 固定写法
                }
            });
        }
    </script>
</fieldset>